<template>
  <div class="progress-overview-page">
    <main class="flex-r-between">
      <div class="echarts-container">
        <echarts-base :options="specOptions"></echarts-base>
      </div>
      <div class="echarts-container">

      </div>
    </main>
  </div>
</template>

<script>
import echartsBase from '@/components/echarts/base';

export default {
  data() {
    return {
      materialNum: 0,
      materialSpecStatic: [],
      specEchartsData: {
        legend: [],
        data: []
      }
    };
  },
  computed: {
    projectId() {
      return this.$store.state.currentProjectId;
    },
    specOptions() {
      return {
        textStyle: {
          color: '#fff'
        },
        legend: {
          data: this.specEchartsData.legend,
          bottom: 10,
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: (e) => {
            const { data: { rate } = {}, marker, name, value } = e;
            return `${name}<br />${marker}${name}: ${value} (${rate})`;
          }
        },
        series: [
          {
            name: '材料资源及投入计划',
            type: 'pie',
            radius: '55%',
            label: {
              color: '#fff',
              formatter: '{b}: {d}%'
            },
            data: this.specEchartsData.data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
    }
  },
  created() {
    this.getMaterialSpecStatic();
  },
  components: {
    echartsBase,
  },
  methods: {
    async getMaterialSpecStatic() {
      const { success, data: {
        data
      }} = await this.$Model.getMaterialSpecStatic({
        projectId: this.projectId
      });
      if (success && data) {
        const { materialNum, materialSpecStatic } = data;
        this.materialSpecStatic = materialSpecStatic || [];
        this.materialNum = materialNum || 0;
        this.setSpecOptions(materialSpecStatic);
      }
    },
    /**
     * 设置图表数据
     * @param {Array} data
     */
    setSpecOptions(data = []) {
      const result = {
        legend: [],
        data: []
      };
      data && data.sort((a, b) => b.planNum - a.planNum);
      data && data.forEach(item => {
        const { planNum, name } = item;
        result.data.push({
          ...item,
          name,
          value: planNum
        });
      });
      result.legend = result.data.map(item => item.name);
      this.specEchartsData = result;
    },
  }
};
</script>

<style scoped lang="scss">
  @import "../../../assets/styles/main";

  .progress-overview-page {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    background: $mainBg;
    main {
      width: 100%;
      height: 100%;
      padding: 30px;
      .echarts-container {
        width: 50%;
        height: 100%;
      }
    }
  }
</style>
